<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Google Cloud DataLab Notebook</title>
  <link rel="shortcut icon" type="image/x-icon" href="<%baseUrl%>static/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="<%baseUrl%>static/components/codemirror/lib/codemirror.css" />
  <link rel="stylesheet" href="<%baseUrl%>static/style/style.min.css" type="text/css" />
  <link rel="stylesheet" href="<%baseUrl%>static/fonts/fonts.css" type="text/css" />
  <link rel="stylesheet" href="<%baseUrl%>static/style/datalab.css" type="text/css" />
  <link rel="stylesheet" id="themeStylesheet" href="<%baseUrl%>static/style/custom.css" type="text/css" id="stylesheet" />
  <link rel="stylesheet" href="<%baseUrl%>static/components/jquery-ui/themes/smoothness/jquery-ui.min.css" />

  <script src="<%baseUrl%>static/components/jquery/jquery.min.js"></script>
  <script src="<%baseUrl%>static/components/preact/index.js" type="text/javascript"></script>
  <script src="<%baseUrl%>static/components/proptypes/index.js" type="text/javascript"></script>
  <script src="<%baseUrl%>static/components/preact-compat/index.js" type="text/javascript"></script>
  <script src="<%baseUrl%>static/components/moment/moment.js" type="text/javascript"></script>
  <script type="text/javascript" src="<%baseUrl%>static/components/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full.js,Safe&delayStartupUntil=configured" charset="utf-8"></script>
</head>
<body class="notebook_app"
  data-project=""
  data-base-url="<%baseUrl%>"
  data-ws-url=""
  data-notebook-name="<%notebookName%>"
  data-notebook-path="<%notebookPath%>"
  data-feedback-id="<%feedbackId%>"
  data-version-id="<%versionId%>"
  data-signed-in="<%isSignedIn%>"
  data-user-id="<%userId%>"
  data-account="<%account%>"
  data-reporting-enabled="<%reportingEnabled%>"
  data-project-hash="<%projectHash%>"
  data-proxy-web-sockets="<%proxyWebSockets%>">

  <script>
     window.datalab = {};
  </script>
  <script src="<%configUrl%>"></script>
  <script src="<%knownTutorialsUrl%>"></script>
  <script>
    var reportingEnabled = (document.body.getAttribute('data-reporting-enabled') == 'true');
    if (reportingEnabled) {
      // Snippet to initialize the Google Tag Manager, which provides anonymized usage reporting
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer',window.datalab.gtmAccount);
      // End Google Tag Manager

      var signedIn = (document.body.getAttribute('data-signed-in') == 'true');
      var projectHash = document.body.getAttribute('data-project-hash');
      var notebookPath = document.body.getAttribute('data-notebook-path');

      var tutorialName = '';
      if (window.datalab.knownTutorials.indexOf(notebookPath) >= 0) {
         tutorialName = notebookPath;
      }

      var event = {
        'event': 'concordEvent',
        'pagePath': '<%baseUrl%>virtual/datalab/openNotebook',
        'eventType': 'datalab',
        'eventName': 'openNotebook',
        'projectNumber': projectHash,
        'metadata': 'signedIn=' + signedIn + ',tutorialName=' + tutorialName,
      }
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push(event);
    }
  </script>

  <div id="app">
    <div id="appBar">
    </div>
    <div id="site">
    <div id="appContent">
      <div id="toolbarArea">
        <div id="mainToolbar">
          <div class="btn-toolbar pull-left">
            <div class="btn-group">
              <button type="button" class="toolbar-btn" data-toggle="dropdown" title="Notebook commands">
                <i class="material-icons">book</i> Notebook
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li id="saveButton"><a href="#">Save and Checkpoint</a></li>
                <li id="saveCopyButton"><a href="#">Save copy</a></li>
                <li id="renameButton"><a href="#">Rename...</a></li>
                <li class="divider"></li>
                <li id="restoreButton" class="dropdown-submenu"><a href="#">Revert to Checkpoint</a>
                  <ul class="dropdown-menu">
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li id="downloadButton"><a href="#">Download</a></li>
                <li class="divider"></li>
                <li id="convertHTMLButton"><a href="#">Convert to HTML</a></li>
                <li id="convertPythonButton"><a href="#">Convert to Python</a></li>
              </ul>
            </div>
            <div class="btn-group">
              <button id="addCodeCellButton" type="button" class="toolbar-btn" title="Append a new code cell">
                <i class="material-icons">add_box</i>
                <i class="material-icons">code</i>
                <span class="toolbar-text">Add Code</span>
              </button>
              <button id="addMarkdownCellButton" type="button" class="toolbar-btn" title="Append a new markdown cell">
                <i class="material-icons">add_box</i>
                <i class="material-icons">text_fields</i>
                <span class="toolbar-text">Add Markdown</span>
              </button>
              <button id="deleteCellButton" type="button" class="toolbar-btn" title="Delete the selected cell">
                <i class="material-icons">clear</i>
                <span class="toolbar-text">Delete</span>
              </button>
              <button id="moveCellUpButton" type="button" class="toolbar-btn" title="Move the selected cell up">
                <i class="material-icons">arrow_upward</i>
                <span class="toolbar-text">Move Up</span>
              </button>
              <button id="moveCellDownButton" type="button" class="toolbar-btn" title="Move the selected cell down">
                <i class="material-icons">arrow_downward</i>
                <span class="toolbar-text">Move Down</span>
              </button>
            </div>
            <div class="btn-group">
              <button id="runButton" type="button" class="toolbar-btn" title="Run the selected cell">
                <i class="material-icons">play_arrow</i> Run
              </button>
              <button type="button" class="toolbar-btn dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li id="runAllButton"><a href="#">Run all Cells</a></li>
                <li id="runToButton"><a href="#">Run to this Cell</a></li>
                <li id="runFromButton"><a href="#">Run from this Cell</a></li>
              </ul>
            </div>
            <div class="btn-group">
              <button id="clearButton" type="button" class="toolbar-btn" title="Clear outputs of the selected cell">
                <i class="material-icons">check_box_outline_blank</i> Clear
              </button>
              <button type="button" class="toolbar-btn dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li id="clearAllButton"><a href="#">Clear all Cells</a></li>
              </ul>
            </div>
            <div class="btn-group">
              <button id="resetSessionButton" type="button" class="toolbar-btn" title="Restart the current notebook session">
                <i id="kernel_indicator_icon"></i> Reset
                <span class="toolbar-text">Session</span>
              </button>
              <button type="button" class="toolbar-btn dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li id="interruptKernelButton"><a href="#">Interrupt Execution</a></li>
              </ul>
            </div>
            <div class="btn-group" id="kernel_picker_menu">
              <button id="kernelSelectorButton" type="button" data-toggle="dropdown" class="toolbar-btn" title="Select kernel">
                <i class="material-icons">track_changes</i>
                <span class="toolbar-text">Kernel: </span>
                <span id="currentKernelName"></span>
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" id="kernelSelectorDropdown">
              </ul>
            </div>
            <!-- The next div and its contents are for ipywidgets. They insert their own menu before #help_menu -->
            <div class="btn-group" id="help_menu_container">
              <div>
                <div id="help_menu">
                </div>
              </div>
            </div>
          </div>
          <div class="btn-toolbar pull-right">
             <div id="sidebarToolbar" class="btn-group" style="">
               <button id="hideSidebarButton" type="button" class="toolbar-btn" title="Toggle sidebar on/off">
                 <i class="material-icons">keyboard_arrow_down</i>
               </button>
             </div>
           </div>
        </div>
      </div>
      <div id="contentArea">
        <div id="mainArea">
          <div id="mainContent" class="container notebookMainContent">
            <div id="ipython-main-app">
              <div id="notebook_panel" style="position: relative">
                <div id="notebook"></div>
                <div id='tooltip' class='ipython_tooltip' style='display:none'></div>
              </div>
            </div>
          </div>
        </div>
        <div id="sidebarArea" style="display:none">
          <div id="sidebarContent">
            <div style="overflow: auto">
              <div class="btn-group">
               <button id="toggleSidebarButton" type="button" class="toolbar-btn" title="Toggle the size of the sidebar">
                 <i class="material-icons">chevron_left</i>
               </button>
  </div>
            </div>
            <div>
              <div id="navigation" style="display: none"></div>
              <div id="help"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
  </div>
  <script src="<%baseUrl%>static/components/es6-promise/promise.min.js"></script>
  <script src="<%baseUrl%>socket.io/socket.io.js"></script>
  <script src="<%baseUrl%>static/components/requirejs/require.js"></script>
  <script>
    window.sys_info = {};
    requirejs.config({
      baseUrl: '<%baseUrl%>static/',
      paths: {
        'auth/js/main': 'auth/js/main.min',
        custom : '<%baseUrl%>custom',
        nbextensions : '<%baseUrl%>nbextensions',
        widgets : '<%baseUrl%>deprecatedwidgets',
        kernelspecs : '<%baseUrl%>kernelspecs',
        underscore : 'components/underscore/underscore-min',
        backbone : 'components/backbone/backbone-min',
        jquery: 'components/jquery/jquery.min',
        bootstrap: 'components/bootstrap/js/bootstrap.min',
        bootstraptour: 'components/bootstrap-tour/build/js/bootstrap-tour.min',
        jqueryui: 'components/jquery-ui/ui/minified/jquery-ui.min',
        codemirror: 'components/codemirror',
        termjs: 'components/term.js/src/term',
      },
      shim: {
        underscore: {
          exports: '_'
        },
        backbone: {
          deps: ["underscore", "jquery"],
          exports: "Backbone"
        },
        bootstrap: {
          deps: ["jquery"],
          exports: "bootstrap"
        },
        bootstraptour: {
          deps: ["bootstrap"],
          exports: "Tour"
        },
        jqueryui: {
          deps: ["jquery"],
          exports: "$"
        }
      }
    });
    requirejs.config({
       map: {
         '*': {
           'contents': 'services/contents',
         }
       }
    });
    window.datalab = {};

    $("#appBar").load("<%baseUrl%>static/appbar.html", function() {
        requirejs(['websocket'], (websocket) => {
            requirejs(['notebook/js/main.min']);
        });
    });
  </script>
  <script src="//www.gstatic.com/feedback/api.js" async="true" defer="true"></script>
  <script type="text/fragment" id="cellStatus">
    <div class="status" style="display: none;">
      Running...
      <div class="progress progress-striped active">
        <div class="progress-bar" style="width: 100%"></div>
      </div>
    </div>
  </script>
  <script type="text/fragment" id="datalabHelp">
    <p><b>Help for Python APIs</b></p>
    <p>
      You can enter <code>class?</code> or <code>member?</code> within a code cell in the
      notebook to get help on a Python API.
    </p>
    <br />
    <p>
      For example, try <code>str?</code> to get help information on the built-in Python
      method to convert a value to its string representation.
    </p>
    <br />
    <p>
      Additional help topics and links are also available from the menu off the Help
      icon on the top of the page.
    </p>
    <br />
    <p><b>Docs and Samples</b></p>
    <p>
      The <a href="<%baseUrl%>notebooks/datalab/docs/Readme.ipynb" target="_blank">Cloud Datalab Guide</a> featuring
      documentation and sample notebooks is also a great way to check out how you can use Cloud Datalab.
    </p>
  </script>
  <script type="text/fragment" id="shortcutsHelp">
    <p>The notebook has two keyboard modes: Edit mode allows you to type code/text into a cell indicated by a raised cell with a shadow. Command mode allows notebook level actions.</p>
    <br>
    <p><b>Command Mode</b> (<code>Esc</code> to enable)</p>
    <div>
      <div><code>Enter</code>: edit mode</div>
      <div><code>Ctrl/Cmd+S</code>: save notebook</div>
      <div><code>Shift+Enter</code>: run cell, select next</div>
      <div><code>Ctrl+Enter</code>: run cell</div>
      <div><code>y</code>: to code</div>
      <div><code>m</code>: to markdown</div>
      <div><code>Up</code>: select previous cell</div>
      <div><code>Down</code>: select next cell</div>
      <div><code>a</code>: insert cell above</div>
      <div><code>b</code>: insert cell below</div>
      <div><code>x</code>: cut cell</div>
      <div><code>c</code>: copy cell</div>
      <div><code>v</code>: paste below</div>
      <div><code>dd</code>: delete cell</div>
      <div><code>l</code>: toggle line numbers</div>
      <div><code>z</code>: undo delete cell</div>
    </div>
    <br>
    <p><b>Edit Mode</b> (<code>Enter</code> to enable)</p>
    <div>
      <div><code>Esc</code>: command mode</div>
      <div><code>Ctrl/Cmd+S</code>: save notebook</div>
      <div><code>Shift+Enter</code>: run cell, select next</div>
      <div><code>Tab</code>: code completion or indent</div>
      <div><code>Shift+Tab</code>: quick help</div>
      <div><code>Ctrl/Cmd+]</code>: indent</div>
      <div><code>Ctrl/Cmd+[</code>: dedent</div>
      <div><code>Ctrl/Cmd+a</code>: select all</div>
      <div><code>Ctrl/Cmd+z</code>: undo</div>
      <div><code>Ctrl/Cmd+Shift+z</code>: redo</div>
      <div><code>Ctrl/Cmd+x</code>: cut selected</div>
      <div><code>Ctrl/Cmd+c</code>: copy selected</div>
      <div><code>Ctrl/Cmd+v</code>: paste</div>
    </div>
  </script>
  <script type="text/fragment" id="markdownHelp">
  <b>Markdown Syntax</b><br /><br />
      <b>Headers</b>
<pre># This is a level 1 header.
## This is a level 2 header.
### This is a level 3 header.</pre>
      <b>Emphasis</b>
<pre>*Italic text*
_Also italic_

**Bold text</pre>
      <b>Unordered Lists</b>
<pre>* Item 1
* Item 2
  * Item 2a</pre>
      <b>Ordered Lists</b>
<pre>1. Item 1
2. Item 2
   * Item 2a</pre>
      <b>Links</b>
<pre>http://cloud.google.com - automatic
[Text](url)</pre>
      <b>Images</b>
      <pre>![Alt Text](url)</pre>
      <b>Quoted Text</b>
<pre>&gt; Quoted Line 1
&gt; Quoted Line 2</pre>
      <b>Inline Code</b>
      <pre>Some `code` inline</pre>
      <b>Code Block</b>
<pre>Normal text

    Indented code text</pre>
    </div>
  </script>
</body>
</html>
